<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const props = defineProps<{
  activeTab: string
}>()

const emit = defineEmits<{
  (e: 'update:activeTab', value: string): void
}>()

const router = useRouter()

const switchTab = (tab: string, path: string) => {
  emit('update:activeTab', tab)
  router.push(path)
}
</script>

<template>
  <!-- 底部TAB栏 -->
  <div class="tab-bar">
    <div class="tab-item" :class="{ active: activeTab === '首页' }" @click="switchTab('首页', '/home')">
      <i class="tab-icon home-icon"></i>
      <span>首页</span>
    </div>
    <div class="tab-item" :class="{ active: activeTab === '社区' }" @click="switchTab('社区', '/community')">
      <i class="tab-icon community-icon"></i>
      <span>社区</span>
    </div>
    
    <!-- 中间的闪电图标 -->
    <div class="tab-item special-tab" :class="{ active: activeTab === '运动' }" @click="switchTab('运动', '/sport')">
      <div class="special-button">
        <div class="special-button-inner">
          <i class="tab-icon sport-icon"></i>
        </div>
      </div>
    </div>
    
    <div class="tab-item" :class="{ active: activeTab === '视频' }" @click="switchTab('视频', '/video')">
      <i class="tab-icon video-icon"></i>
      <span>视频</span>
    </div>
    <div class="tab-item" :class="{ active: activeTab === '我的' }" @click="switchTab('我的', '/my')">
      <i class="tab-icon my-icon"></i>
      <span>我的</span>
    </div>
  </div>
</template>

<style scoped>
/* 底部TAB栏样式 */
.tab-bar {
  position: fixed; /* 保持固定定位 */
  bottom: 0; /* 固定在底部 */
  left: 0;
  width: 100%;
  height: 65px; /* 保持高度 */
  display: flex;
  background-color: #fff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15); /* 保持阴影效果 */
  border-top: 1px solid #ddd; /* 保持顶部边框 */
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 12px;
  transition: all 0.3s;
  position: relative;
  padding: 5px 0;
}

.tab-item.active {
  color: #000;
}

.tab-icon {
  width: 24px;
  height: 24px;
  margin-bottom: 2px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* 图标样式 - 可以替换为实际的图标或使用字体图标 */
.home-icon {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>');
}

.community-icon {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>');
}

.sport-icon {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23FFD700" d="M7 2v11h3v9l7-12h-4l4-8z"/></svg>');
  width: 20px;
  height: 20px;
}

.video-icon {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"/></svg>');
}

.my-icon {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>');
}

/* 特殊TAB项样式 */
.special-tab {
  position: relative;
  margin-top: -5px; /* 保持特殊按钮位置 */
}

.special-button {
  position: absolute;
  top: -25px; /* 调整位置，使按钮更靠上一些 */
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); /* 增强阴影 */
}

.special-button-inner {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 响应式媒体查询 */
@media screen and (max-width: 375px) {
  .tab-bar {
    height: 60px; /* 增加高度，确保在小屏幕上可见 */
  }
  
  .tab-icon {
    width: 20px;
    height: 20px;
  }
  
  .tab-item {
    font-size: 10px;
  }
  
  .special-button {
    width: 45px;
    height: 45px;
    top: -22px;
  }
  
  .special-button-inner {
    width: 35px;
    height: 35px;
  }
}

/* 添加大屏幕适配 */
@media screen and (min-width: 747px) {
  .tab-bar {
    height: 70px; /* 在大屏幕上增加高度 */
    max-width: 100vw; /* 使用视口宽度而不是固定值 */
    min-width: 100vw; /* 确保最小宽度 */
    left: 0; /* 不需要居中，直接占满宽度 */
    transform: none; /* 移除transform */
  }
}

/* 适配iPhone X及以上机型的底部安全区域 */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .tab-bar {
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(65px + env(safe-area-inset-bottom)); /* 调整高度 */
  }
}

/* 添加额外的媒体查询，确保在各种设备上都能正确显示 */
@media screen and (max-height: 700px) {
  .tab-bar {
    height: 50px;
  }
  
  .special-button {
    top: -20px;
    width: 40px;
    height: 40px;
  }
  
  .special-button-inner {
    width: 32px;
    height: 32px;
  }
}
</style>